<template>
	<swiper :options="swiperOption" class="album-img" :style="'height:' + height/10 + 'rem'">
		<swiper-slide v-for="(item, index) in list" :key="index">
			<img :src="item.url" class="max" @click="previewImage(item.url)">
		</swiper-slide>
	</swiper>
</template>

<script>
	import wx from "weixin-js-sdk";
	export default {
		props: {
			height: {
				type: Number,
				default: 180
			},
			list: {
				type: Array,
				default: []
			},
			options: {
				type: Object,
				default: () => {
					return {
						autoplay: true,
						delay: 5000,
						centeredSlides: true,
						slidesPerView: 1,
						observer: true, //修改swiper自己或子元素时，自动初始化swiper
						observeParents: true, //修改swiper的父元素时，自动初始化swiper
					}
				}
			}
		},
		data() {
			return {
				imgList: [],
				swiperOption: {}
			}
		},
		watch: {
			list() {
				this.imgList = this.list;
			},
			options(val) {
				Object.assign(this.swiperOption, this.options)
			}
		},
		methods: {
			previewImage(url) {
				wx.previewImage({
					previewImage: url,
					urls: [url]
				})
			},
		},
		created() {
			Object.assign(this.swiperOption, this.options)
		}
	}
</script>

<style scoped>
	.album-img {
		margin-top: 10px;
		width: 100%;
	}
</style>
